<template>
  <div class="admin-settings">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800">系统设置</h1>
    </div>

    <div class="max-w-7xl mx-auto">
      <div class="bg-white rounded-lg shadow-sm border border-gray-200">


          <!-- 系统配置 -->
          <div class="p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-6">系统配置</h3>
            
            <div class="space-y-6">
              <!-- 系统信息 -->
              <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h4 class="font-medium text-blue-900 mb-3">系统信息</h4>
                <div class="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span class="text-blue-700">系统版本:</span>
                    <span class="ml-2 text-blue-900">v1.0.0</span>
                  </div>
                  <div>
                    <span class="text-blue-700">数据库版本:</span>
                    <span class="ml-2 text-blue-900">MySQL 8.0</span>
                  </div>
                  <div>
                    <span class="text-blue-700">服务器时间:</span>
                    <span class="ml-2 text-blue-900">{{ currentTime }}</span>
                  </div>
                  <div>
                    <span class="text-blue-700">运行时间:</span>
                    <span class="ml-2 text-blue-900">{{ systemUptime }}</span>
                  </div>
                </div>
              </div>

              <!-- CPU 监控 -->
              <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                <h4 class="font-medium text-green-900 mb-3">
                  <i class="fas fa-microchip mr-2"></i>CPU 监控
                </h4>
                <div class="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span class="text-green-700">核心数:</span>
                    <span class="ml-2 text-green-900">{{ systemStats.cpu.cores }}</span>
                  </div>
                  <div>
                    <span class="text-green-700">用户使用率:</span>
                    <span class="ml-2 text-green-900">{{ systemStats.cpu.userUsage }}%</span>
                  </div>
                  <div>
                    <span class="text-green-700">系统使用率:</span>
                    <span class="ml-2 text-green-900">{{ systemStats.cpu.systemUsage }}%</span>
                  </div>
                  <div>
                    <span class="text-green-700">当前空闲率:</span>
                    <span class="ml-2 text-green-900">{{ systemStats.cpu.idleRate }}%</span>
                  </div>
                </div>
                <!-- CPU 使用率进度条 -->
                <div class="mt-3">
                  <div class="flex justify-between text-xs text-green-700 mb-1">
                    <span>CPU 总使用率</span>
                    <span>{{ systemStats.cpu.totalUsage }}%</span>
                  </div>
                  <div class="w-full bg-green-200 rounded-full h-2">
                    <div
                      class="bg-green-600 h-2 rounded-full transition-all duration-300"
                      :style="{ width: systemStats.cpu.totalUsage + '%' }"
                    ></div>
                  </div>
                </div>
              </div>

              <!-- 内存监控 -->
              <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                <h4 class="font-medium text-orange-900 mb-3">
                  <i class="fas fa-memory mr-2"></i>内存监控
                </h4>
                <div class="grid grid-cols-3 gap-4 text-sm">
                  <div class="text-center">
                    <div class="text-orange-700 font-medium">物理内存</div>
                    <div class="mt-1">
                      <div class="text-orange-900">总内存: {{ systemStats.memory.physical.total }}</div>
                      <div class="text-orange-900">已用: {{ systemStats.memory.physical.used }}</div>
                      <div class="text-orange-900">剩余: {{ systemStats.memory.physical.free }}</div>
                      <div class="text-orange-600 font-medium mt-1">使用率: {{ systemStats.memory.physical.usage }}%</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-orange-700 font-medium">JVM 内存</div>
                    <div class="mt-1">
                      <div class="text-orange-900">总内存: {{ systemStats.memory.jvm.total }}</div>
                      <div class="text-orange-900">已用: {{ systemStats.memory.jvm.used }}</div>
                      <div class="text-orange-900">剩余: {{ systemStats.memory.jvm.free }}</div>
                      <div class="text-orange-600 font-medium mt-1">使用率: {{ systemStats.memory.jvm.usage }}%</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-orange-700 font-medium">缓存内存</div>
                    <div class="mt-1">
                      <div class="text-orange-900">Redis: {{ systemStats.memory.cache.redis }}</div>
                      <div class="text-orange-900">应用缓存: {{ systemStats.memory.cache.app }}</div>
                      <div class="text-orange-900">数据库缓存: {{ systemStats.memory.cache.db }}</div>
                    </div>
                  </div>
                </div>
                <!-- 内存使用率进度条 -->
                <div class="mt-4 space-y-2">
                  <div>
                    <div class="flex justify-between text-xs text-orange-700 mb-1">
                      <span>物理内存使用率</span>
                      <span>{{ systemStats.memory.physical.usage }}%</span>
                    </div>
                    <div class="w-full bg-orange-200 rounded-full h-2">
                      <div
                        class="bg-orange-600 h-2 rounded-full transition-all duration-300"
                        :style="{ width: systemStats.memory.physical.usage + '%' }"
                      ></div>
                    </div>
                  </div>
                  <div>
                    <div class="flex justify-between text-xs text-orange-700 mb-1">
                      <span>JVM 内存使用率</span>
                      <span>{{ systemStats.memory.jvm.usage }}%</span>
                    </div>
                    <div class="w-full bg-orange-200 rounded-full h-2">
                      <div
                        class="bg-orange-500 h-2 rounded-full transition-all duration-300"
                        :style="{ width: systemStats.memory.jvm.usage + '%' }"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 关于系统 -->
              <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <h4 class="font-medium text-purple-900 mb-3">
                  <i class="fas fa-info-circle mr-2"></i>关于系统
                </h4>
                <div class="text-center">
                  <div class="mb-4">
                    <i class="fas fa-book text-4xl text-purple-600 mb-3"></i>
                    <h5 class="text-lg font-bold text-purple-800">书香阁管理系统</h5>
                    <p class="text-purple-600 text-sm mt-1">专业的在线书店管理平台</p>
                  </div>

                  <div class="bg-white rounded-lg p-4 text-left">
                    <div class="grid grid-cols-2 gap-3 mb-4 text-sm">
                      <div>
                        <span class="text-purple-700 font-medium">版本号:</span>
                        <span class="ml-2 text-purple-900">v1.0.0</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">发布日期:</span>
                        <span class="ml-2 text-purple-900">2025-07-24</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">技术栈:</span>
                        <span class="ml-2 text-purple-900">Spring Boot + Vue 3 + Element Plus + MySQL</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">开发作者:</span>
                        <span class="ml-2 text-purple-900">程序员_Ti</span>
                      </div>
                    </div>

                    <div class="border-t border-purple-100 pt-3">
                      <h6 class="font-medium text-purple-900 mb-2 text-sm">核心功能</h6>
                      <div class="grid grid-cols-2 gap-1 text-xs text-purple-700">
                        <div>• 用户管理系统</div>
                        <div>• 图书信息管理</div>
                        <div>• 订单处理跟踪</div>
                        <div>• 数据统计分析</div>
                        <div>• 系统监控面板</div>
                        <div>• 权限控制管理</div>
                      </div>
                    </div>

                    <div class="border-t border-purple-100 pt-3 mt-3">
                      <div class="flex justify-between items-center text-xs text-purple-600">
                        <span>© 2025 程序员_Ti</span>
                        <span>All Rights Reserved</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { adminAPI } from '@/api/admin'

// 响应式数据

const backing = ref(false)
const currentTime = ref('')
const systemUptime = ref('72小时30分钟')

// 系统统计数据
const systemStats = reactive({
  cpu: {
    cores: 2,
    userUsage: 0.75,
    systemUsage: 0.8,
    idleRate: 98.45,
    totalUsage: 1.55
  },
  memory: {
    physical: {
      total: '1.92G',
      used: '1.56G',
      free: '0.36G',
      usage: 81.41
    },
    jvm: {
      total: '490.0M',
      used: '435.44M',
      free: '54.56M',
      usage: 88.87
    },
    cache: {
      redis: '128M',
      app: '64M',
      db: '256M'
    }
  }
})







// 方法



const clearCache = async (type) => {
  try {
    await adminAPI.clearCache(type)
    ElMessage.success(`${type}缓存清除成功`)
  } catch (error) {
    ElMessage.error('清除失败：' + error.message)
  }
}

const createBackup = async () => {
  backing.value = true
  try {
    await adminAPI.createBackup()
    ElMessage.success('数据备份创建成功')
  } catch (error) {
    ElMessage.error('备份失败：' + error.message)
  } finally {
    backing.value = false
  }
}

const updateCurrentTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

// 更新系统统计数据
const updateSystemStats = () => {
  // 模拟CPU使用率变化
  systemStats.cpu.userUsage = +(Math.random() * 2 + 0.5).toFixed(2)
  systemStats.cpu.systemUsage = +(Math.random() * 1.5 + 0.3).toFixed(2)
  systemStats.cpu.totalUsage = +(systemStats.cpu.userUsage + systemStats.cpu.systemUsage).toFixed(2)
  systemStats.cpu.idleRate = +(100 - systemStats.cpu.totalUsage).toFixed(2)

  // 模拟内存使用率变化
  const physicalUsage = +(Math.random() * 10 + 75).toFixed(2)
  const jvmUsage = +(Math.random() * 15 + 80).toFixed(2)

  systemStats.memory.physical.usage = physicalUsage
  systemStats.memory.jvm.usage = jvmUsage

  // 根据使用率更新内存数据
  const totalPhysical = 1.92
  const usedPhysical = +(totalPhysical * physicalUsage / 100).toFixed(2)
  const freePhysical = +(totalPhysical - usedPhysical).toFixed(2)

  systemStats.memory.physical.used = usedPhysical + 'G'
  systemStats.memory.physical.free = freePhysical + 'G'

  const totalJvm = 490
  const usedJvm = +(totalJvm * jvmUsage / 100).toFixed(0)
  const freeJvm = totalJvm - usedJvm

  systemStats.memory.jvm.used = usedJvm + 'M'
  systemStats.memory.jvm.free = freeJvm + 'M'
}

// 生命周期
onMounted(() => {
  updateCurrentTime()
  updateSystemStats()

  const timeTimer = setInterval(updateCurrentTime, 1000)
  const statsTimer = setInterval(updateSystemStats, 3000) // 每3秒更新一次系统统计

  onUnmounted(() => {
    clearInterval(timeTimer)
    clearInterval(statsTimer)
  })
})
</script>

<style scoped>
.admin-settings {
  @apply max-w-7xl mx-auto;
}
</style>
